<template>
  <BasicModal
    :canFullscreen="false"
    :height="50"
    v-bind="$attrs"
    @register="register"
    title="添加二级分类信息"
    @visible-change="handleVisibleChange"
    okText="添加"
    @ok="handleSubmit"
  >
    <div class="pt-3px pr-3px">
      <BasicForm @register="registerForm" :model="modelRef" />
    </div>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, ButtonProps, FormSchema, useForm } from '/@/components/Form/index';
  import { addClassification } from '/@/api/preschool/course';
  const schemas: FormSchema[] = [
    {
      field: 'title',
      rules: [
        {
          required: true,
          trigger: 'change',
        },
      ],
      component: 'Input',
      label: '二级分类名',
      colProps: {
        span: 24,
      },
      componentProps: () => {
        return {
          placeholder: '请输入二级课程名',
        };
      },
    },
  ];
  export default defineComponent({
    components: { BasicModal, BasicForm },
    props: {
      userData: { type: Object },
    },
    setup(props, context) {
      const modelRef = ref({});
      const submitConfig: ButtonProps = {
        text: '提交修改',
      };
      const [
        registerForm,
        {
          // setFieldsValue,
          resetFields,
          // setProps,
          getFieldsValue,
          validateFields,
        },
      ] = useForm({
        labelWidth: 120,
        autoFocusFirstItem: true,
        showActionButtonGroup: false,
        schemas,
        submitButtonOptions: submitConfig,
        actionColOptions: {
          span: 24,
        },
      });
      let parentId = ref<string>();
      const [register, { closeModal }] = useModalInner((data) => {
        data && onDataReceive(data);
      });

      function handleVisibleChange(v) {
        v && props.userData;
      }
      function onDataReceive(data) {
        console.log('data接收到', data);
        parentId.value = data;
      }
      /**
       * @description 发送请求前校验表单
       * @param values
       */
      async function validateForm(values: any) {
        try {
          await validateFields();
          console.log('passing');
          addClassification(values)
            .then((res) => {
              console.log(res);
              //调用父组件的方法刷新数据
              context.emit('update');
              closeModal();
              resetFields();
            })
            .catch((error) => {
              console.log('error' + error);
            });
        } catch (error) {
          console.log('not passing', error);
        }
      }
      return {
        register,
        schemas,
        registerForm,
        modelRef,
        handleVisibleChange,
        handleSubmit: () => {
          let values = getFieldsValue();
          values.parentId = parentId.value;
          console.log('values', values);
          console.log(validateForm(values));
        },
        ok: () => {},
      };
    },
  });
</script>
